<template>
  <!-- 考生可以进行的考试列表 -->
  <div>
    <el-row :gutter="20" v-if="list.length > 0">
      <el-col :span="8" v-for="item in list" :key="item.id">
        <el-card class="box-card">
          <div slot="header" class="test-title">
            <span>{{ item.title }}</span>
          </div>
          <div class="item">
            截止日期：<br>{{ item.deadline | convertTime }}
          </div>
          <el-divider></el-divider>
          <div class="item">
            限制时间：<br>{{ item.timelimit }} 分钟
          </div>
          <el-divider></el-divider>
          <div class="item">
            总题数：<br>{{ JSON.parse(item.questions).length }} 道
          </div>
          <el-divider></el-divider>
          <div class="item">
            总分数：<br> {{ calcScores(JSON.parse(item.questions)) }} 分
          </div>
          <el-divider></el-divider>
          <div class="item">
            考试记录：<br>
            <div v-for="(r, index) in records" :key="index">
              <div v-if="r.test_id === item.id">
                <span style="color:#409EFF;font-size:1.25rem;">{{ r.score }}</span>
                <span> 分</span>
              </div>
              <div v-else>
                暂无记录~
              </div>
            </div>
          </div>
          <el-divider></el-divider>
          <div style="text-align:center;">
            <div class="item">
              祝你好运，加油~
            </div>
            <el-button type="primary" plain @click="startTest(item.id)">开始考试</el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <div v-else class="wrapper">
      当前没有分配的考试试卷~
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { getUserTestsB } from '@/api/admin'
import moment from 'moment'

export default {
  computed: mapState([ 'adminInfo' ]),
  data() {
    return {
      list: [],
      records: []
    }
  },
  filters: {
    convertTime: val => {
      return moment(val).format('dddd, MM/DD/YYYY, h:mm:ss a')
    }
  },
  created() {
    this.getUserTests()
  },
  methods: {
    // 计算试卷总分
    calcScores(questions) {
      let total = 0
      questions.forEach(item => {
        total += Number(item.score)
      })
      return total
    },
    // 获取用户的考试列表
    getUserTests() {
      getUserTestsB({ id: this.adminInfo.id }).then(res => {
        if(res.data.code === '0') {
          this.$message.success(res.data.desc)
          this.list = res.data.content
          this.records = res.data.records
        } else {
          this.$message.error(res.data.desc)
        }
      }).catch(err => {
        this.$message.error(res.data.desc)
      })
    },
    // 开始考试
    startTest(id) {
      this.$confirm('准备好开始考试了吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$router.push({ path: '/admin-tests/mytests/'+id })
        }).catch(err => {
          console.log(err)
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.wrapper {
  margin: 10px;
  color: #999;
}
.box-card {
  margin: 15px;
}
.test-title {
  text-align: center;
  color: #409EFF;
  font-size: 1.25rem;
}
.item {
  margin-bottom: 15px;
  color: #888;
}
</style>